<template>
  <div class="header">
    <div class="header-top">
      <a-form layout="inline" :model="criteriaList" class="ant-advanced-search-form">
        <a-form-item label="审核状态" style="margin: 5px 0">
          <a-select
            v-model:value="criteriaList.auditState"
            style="width: 200px"
            placeholder="请选择审核状态"
            allow-clear
            :field-names="{ label: 'text', value: 'value' }"
            :options="options2"
          ></a-select>
        </a-form-item>

        <a-form-item label="类型" style="margin: 5px 0">
          <a-select
            v-model:value="criteriaList.type"
            style="width: 200px"
            placeholder="请选择类型"
            allow-clear
            :field-names="{ label: 'text', value: 'value' }"
            :options="blacklistType"
          ></a-select>
        </a-form-item>

        <a-form-item label="粉丝昵称" style="margin: 5px 0">
          <a-input v-model:value="criteriaList.fansNickName" placeholder="请输入粉丝昵称" />
        </a-form-item>

        <a-form-item label="提交用户姓名" style="margin: 5px 0">
          <a-input v-model:value="criteriaList.userName" placeholder="请输入提交用户姓名" />
        </a-form-item>

        <a-form-item style="margin: 5px 0">
          <a-button type="primary" :icon="h(SearchOutlined)" @click="search">查询</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="header-bottom">
      <a-table
        :columns="columns"
        :data-source="dataList"
        :loading="loading"
        :pagination="pagination"
        :scroll="{ x: 2200 }"
        @change="onChange"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'fansAvatar'">
            <a-image :width="60" :src="record.fansAvatar" />
          </template>

          <template v-if="column.dataIndex === 'type'">
            <div>
              <a-tag color="processing">
                {{ blacklistType.find(item => item.value === record.type)?.text }}
              </a-tag>
            </div>
          </template>

          <template v-if="column.dataIndex === 'auditState'">
            <div>
              <a-tag
                :color="
                  record.auditState === 1
                    ? 'processing'
                    : record.auditState === 2
                    ? 'success'
                    : 'error'
                "
              >
                {{ options2.find(item => item.value === record.auditState)?.text }}
              </a-tag>
            </div>
          </template>

          <template v-if="column.dataIndex === 'imageList'">
            <div>
              <a-image
                :preview="{ visible: false }"
                :width="100"
                :src="record.imageList[0]"
                @click="getYuLan(record.imageList)"
              />
            </div>
          </template>

          <template v-if="column.dataIndex === 'auditTime'">
            <div v-if="record.auditTime != 0">
              {{ dayjs(Number(record.auditTime)).format('YYYY-MM-DD HH:mm:ss') }}
            </div>

            <div v-else>暂未审核</div>
          </template>

          <template v-if="column.dataIndex === 'submitTime'">
            <div>
              {{ dayjs(Number(record.submitTime)).format('YYYY-MM-DD HH:mm:ss') }}
            </div>
          </template>

          <template v-if="column.dataIndex === 'description'">
            <a-tooltip placement="top">
              <template #title>
                <span>{{ record.description }}</span>
              </template>
              {{ record.description }}
            </a-tooltip>
          </template>

          <template v-if="column.key === 'operation'">
            <a-button
              type="text"
              :disabled="record.auditState != 1"
              style="color: #1890ff"
              @click="getAudit(record, 2)"
            >
              通过
            </a-button>

            <a-button
              type="text"
              :disabled="record.auditState != 1"
              style="color: #dc362e"
              @click="getAudit(record, 3)"
            >
              拒绝
            </a-button>
          </template>
        </template>
      </a-table>
    </div>

    <div style="display: none">
      <a-image-preview-group :preview="{ visible, onVisibleChange: (vis:any) => (visible = vis) }">
        <a-image v-for="(item, index) in imgList" :key="index" :src="item" />
      </a-image-preview-group>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, h } from 'vue'
import dayjs from 'dayjs'
import { SearchOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { fansBlacklistAuditList, fansBlacklistAudit } from '@/api/black'
import Config from '@/settings'
import { createVNode } from 'vue'
import { Modal } from 'ant-design-vue'
import { getIsHint } from '@/utils/validate'

const loading = ref(false)

const visible = ref(false)

const options2 = Config.data.blackTai

const blacklistType = Config.data.blackType

const criteriaList = reactive({
  auditState: null, // 审核状态
  type: null, // 类型
  fansNickName: '', // 粉丝昵称
  userName: '', // 提交用户人姓名
})

// 分页配置
const pagination = reactive({
  current: 1, // 页数
  pageSize: 20, // 每页显示的条数
  simple: window.innerWidth <= 992 ? true : false,
  // hideOnSinglePage: true,
  total: 0,
})

const onChange = (paGinaTion: any) => {
  pagination.current = paGinaTion.current
  pagination.pageSize = paGinaTion.pageSize

  shows()
}

const columns = [
  {
    title: '头像',
    width: 100,
    dataIndex: 'fansAvatar',
    key: 'fansAvatar',
  },
  {
    title: '昵称',
    width: 160,
    dataIndex: 'fansNickName',
    key: 'fansNickName',
  },
  {
    title: '类型',
    width: 120,
    dataIndex: 'type',
    key: 'type',
    ellipsis: true,
  },
  {
    title: '上传截图',
    width: 150,
    dataIndex: 'imageList',
    key: 'imageList',
    ellipsis: true,
  },
  {
    title: '描述',
    width: 230,
    dataIndex: 'description',
    key: 'description',
    ellipsis: true,
  },
  {
    title: '提交人用户名',
    width: 160,
    dataIndex: 'userName',
    key: 'userName',
    ellipsis: true,
  },
  {
    title: '提交人机器人昵称',
    width: 160,
    dataIndex: 'robotNickName',
    key: 'robotNickName',
    ellipsis: true,
  },
  {
    title: '审核用户名',
    width: 160,
    dataIndex: 'auditUserName',
    key: 'auditUserName',
    ellipsis: true,
  },
  {
    title: '审核状态',
    width: 140,
    dataIndex: 'auditState',
    key: 'auditState',
    ellipsis: true,
  },
  {
    title: '审核时间',
    dataIndex: 'auditTime',
    key: 'auditTime',
    width: 160,
    ellipsis: true,
  },
  {
    title: '提交时间',
    dataIndex: 'submitTime',
    key: 'submitTime',
    width: 160,
    ellipsis: true,
  },
  {
    title: '操作',
    width: 160,
    key: 'operation',
    fixed: 'right',
  },
]

const imgList = ref([])

const dataList = ref([])

onMounted(() => {
  shows()
})

// 点击通过审核 / 拒绝审核
const getAudit = (data: any, val: any) => {
  Modal.confirm({
    title: '提示?',
    icon: createVNode(ExclamationCircleOutlined),
    content: val == 2 ? `确定要通过审核吗?` : `确定要拒绝通过审核吗?`,
    centered: true,
    async onOk() {
      const { state, message } = await fansBlacklistAudit({ id: data.id, auditState: val })
      if (state === 200) {
        getIsHint('success', '操作成功~')

        shows()
      } else {
        getIsHint('error', message)
      }
    },
    onCancel() {
      console.log('Cancel')
    },
    class: 'test',
  })
}

const getYuLan = (img: any) => {
  imgList.value = img

  visible.value = true
}

const shows = async () => {
  loading.value = true

  try {
    const a = { ...criteriaList, currentPage: pagination.current, pageSize: pagination.pageSize }

    const { data, state } = await fansBlacklistAuditList(a)

    loading.value = false

    if (state === 200) {
      dataList.value = data.list
      pagination.total = data.total
    }
  } catch (e) {
    loading.value = false
  }
}

// 点击查询
const search = () => {
  shows()
}

defineExpose({
  shows,
})
</script>
<style lang="less" scoped>
.header {
  width: 100%;
  min-height: 750px;
  margin-bottom: 30px;
  background-color: #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
  .header-top {
    width: 95%;
    margin-top: 20px;
  }

  .header-bottom {
    margin: 20px 0;
    width: 95%;
  }
}
</style>
